<template>
	<view>
		<!-- 		<view style="display: flex;justify-content: space-between;">
			<text></text>
			<text style="color: #4c4c4c;margin-right: 20rpx;margin-top: 20rpx;">申请开票</text>
		</view> -->
		<view v-if="rechargeList.length==0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无充值记录">
			</u-empty>
		</view>
		<view v-else class="recharge_box" v-for="(item,index) in rechargeList" :key="index">
			<view v-if="item.subject=='充值金豆'">
				<view style="display: flex;justify-content: space-between;">
					<text style="font-size: 32rpx;">充值金额：{{item.recharge_amount/100}} 元</text>
					<text v-if='item.pay_status == 1' style="color: #ff5500;font-size: 32rpx;">+{{item.bean}}金豆</text>
					<text v-else-if='item.pay_status == 0' style="color: #ff0000;font-size: 32rpx;">未支付</text>
					<text v-else-if='item.pay_status == 2' style="color: #ffaa00;font-size: 32rpx;">已退款</text>
				</view>

				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					<text style="color: #888;font-size: 28rpx;">说明：{{item.remark}}</text>
					<text
						style="color: #888;font-size: 24rpx;">{{$u.timeFormat(item._add_time, 'yyyy/mm/dd hh:MM:ss')}}</text>
				</view>
			</view>

			<view v-else>
				<view style="display: flex;justify-content: space-between;">
					<text style="font-size: 32rpx;">充值金额：{{item.recharge_amount/100}} 元</text>
					<text v-if='item.pay_status == 1' style="color: #ff5500;font-size: 32rpx;">{{item.subject}}</text>
					<text v-else-if='item.pay_status == 0' style="color: #ff0000;font-size: 32rpx;">未支付</text>
					<text v-else-if='item.pay_status == 2' style="color: #ffaa00;font-size: 32rpx;">已退款</text>

				</view>

				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					<text style="color: #888;font-size: 28rpx;">说明：{{item.remark}}</text>
					<text
						style="color: #888;font-size: 24rpx;">{{$u.timeFormat(item._add_time, 'yyyy/mm/dd hh:MM:ss')}}</text>
				</view>
			</view>
		</view>
		<!-- 客服按钮 -->
		<button class="ttbuttona" open-type="im" :data-im-id="vk.vuex.get('$app.dykefu')" bindim="imCallback"
			binderror="onimError" shape="circle">
			<u-icon name="kefu-ermai" color="#c8c8c0" size="32"></u-icon>
		</button>
	</view>
</template>

<script>
	//定义数据库的方法，必须添加
	const db = uniCloud.database();
	export default {
		data() {
			return {
				page: 1, //记录当前的数据页数
				rechargeList: [],
			}
		},
		//页面载入时执行onload函数，async和await是固定搭配，作用是等待这一句执行完再执行下一句代码。
		async onLoad() {
			vk.showLoading('加载中...');
			//定义一个变量rechargeList，把数据库里查询到的数据列表存到里面
			const rechargeList = await db.collection('a_recharge').where({
				user_id: vk.vuex.get('$user.userInfo._id') || '123',
				// pay_status: 1
			}).orderBy('_add_time', 'desc').limit(20).get()

			//把数据库里取到的数据赋值给this.rechargeList，xxx.result.data也是固定格式
			this.rechargeList = rechargeList.result.data
			vk.hideLoading();
		},

		//触底时执行的函数
		async onReachBottom() {
			console.log("触底");

			//跟onload里的语句基本一样，多了一个skip，skip(100)表示跳过前100条数据
			const morelist = await db.collection('a_recharge').where({
				user_id: vk.vuex.get('$user.userInfo._id')
			}).skip(this.page * 20).orderBy('_add_time', 'desc').limit(20).get()

			//把数据库里获取到的新数据追加到原数据的后面，用concat方法。 
			//concat固定用法 this.a = this.a.concat(newdata)
			this.rechargeList = this.rechargeList.concat(morelist.result.data)

			this.page = this.page + 1;
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.recharge_box {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 14rpx;
	}

	.ttbuttona {

		background-color: rgba(250, 250, 250, 0);
		position: fixed;
		bottom: 150rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		z-index: 999;
		/* 移除点击时的外部边框 */
	}

	.ttbuttona::after {
		content: "";
		/* 确保内容为空，以保持伪类可见性 */
		border: none;
		/* 去除伪类元素的边框 */
	}
</style>